// import { useObserver } from 'mobx-react'
import Loading from '@/components/PageLoading/index'
import Medal from '@/pages/measurements/result/components/index'
import { ClockCircleOutline, DownOutline, UpOutline } from 'antd-mobile-icons'
import { toJS } from 'mobx'
import React, { useEffect, useMemo, useState } from 'react'
import { history } from 'umi'
import { DIMENSION_TYPE } from './dict'
import Hook from './hook'
import styles from './index.module.less'
import PieChart from './Pie'
import Poster from './Poster'
import RadarChart from './Radar'

export default function (props) {
    const { data } = props
    const dataTotal = toJS(data)
    const hook = new Hook(data)

    const [start_time, setStartTime] = useState(0)

    // 测评结果
    const { medalInfo } = JSON.parse(localStorage.getItem('measurement_result') || '{}')

    useEffect(() => {
        setStartTime(Date.parse(new Date()))
    }, [])

    const RadarMemo = useMemo(() => {
        return <RadarChart chartData={hook.myScore} indicatorData={hook.dimensionScore} />
    }, [hook.myScore, hook.dimensionScore])

    const PieChartMemo = useMemo(() => {
        console.log('1111111111')
        return <PieChart chartData={hook.pieData} rate={hook.rate} defaultItem={hook.info?.name} dimensionType={hook.evalInfo?.dimension_type} />
    }, [hook.pieData, hook.rate, hook.info?.name, hook.evalInfo?.dimension_type])

    return (
        <React.Fragment>
            {/* <Prompt
        message={location => {
          if (
            ['/measurements', '/measurements/exam', '/measurements/result'].includes(
              location.pathname
            )
          ) {
            return true
          }
          history.goBack()
          return false
        }}
      /> */}
            <div className={styles.top_view}>
                <div className={styles.header_bg} />
                <div
                    className={styles.container}
                    style={{
                        paddingBottom: '2.3rem',
                    }}
                >
                    {hook.info ? (
                        <>
                            <div className={styles.barrier_name}>{dataTotal?.name}</div>
                            <div className={styles.header}>
                                <div className={styles.header_title}>{hook.evalInfo?.name}</div>
                                <div className={styles.header_time}>
                                    <ClockCircleOutline /> {hook.createTime}
                                </div>
                            </div>

                            {/* 测试结果 */}
                            <div className={styles.result_box_bj}>
                                <div className={styles.result_box}>
                                    <div>
                                        <div className={styles.result_header}>
                                            <div className={styles.result_title}>我的测试结果</div>
                                        </div>
                                    </div>
                                    {hook.info?.cover && (
                                        <div className={styles.result_img}>
                                            <img src={hook.info?.cover} />
                                        </div>
                                    )}

                                    {/* 总分规则题 */}
                                    {hook.evalInfo?.dimension_type === DIMENSION_TYPE.TotalScore && <div className={styles.result_name}>{`${hook.totalScore}分`}</div>}

                                    {hook.info?.type && <div className={styles.result_type}>{hook.info?.type}</div>}

                                    {hook.info?.name && <div className={styles.result_name}>{hook.info?.name}</div>}

                                    {hook.info?.keyword && (
                                        <div className={styles.result_keys}>
                                            <div>{`关键字: ${typeof hook?.info?.keyword === 'string' ? hook?.info?.keyword : hook.info?.keyword?.join('、')}`}</div>
                                        </div>
                                    )}
                                </div>
                            </div>

                            {/* 分析图 */}
                            <div className={styles.analysis_box}>
                                <div className={styles.analysis_title} />

                                {/* 1-MBTI、2-霍兰德、3-自组题、其他 */}
                                {hook.evalInfo &&
                                    ([DIMENSION_TYPE.MBTI, DIMENSION_TYPE.Holland].includes(hook.evalInfo?.dimension_type) ? (
                                        <div className={styles.analysis_chart}>{RadarMemo}</div>
                                    ) : (
                                        <div className={styles.analysis_chart}>{PieChartMemo}</div>
                                    ))}
                            </div>

                            {/* 默认收起内容 */}
                            {hook.expand &&
                                hook.resultList?.map(item => {
                                    const { id, type, name, detail } = item
                                    return (
                                        <div key={id}>
                                            {/* 只有霍兰德显示类型 */}
                                            {hook.evalInfo?.dimension_type === DIMENSION_TYPE.Holland && (
                                                <div className={styles.detail_type}>
                                                    <div />
                                                    {`${type}(${name})`}
                                                </div>
                                            )}
                                            <div className={styles.detail}>
                                                {detail?.map(item => {
                                                    const { id, title, content } = item
                                                    return (
                                                        <div key={id} className={styles.detail_box}>
                                                            <div className={styles.detail_title}>
                                                                <div>
                                                                    <img src="https://static.zpimg.cn/public/career_sp/measurements/icon_ball.png" />
                                                                    {title}
                                                                </div>
                                                                <div className={styles.title_sign} />
                                                            </div>
                                                            <div className={styles.detail_content}>{content}</div>
                                                        </div>
                                                    )
                                                })}
                                            </div>
                                        </div>
                                    )
                                })}
                            <div className={styles.show_more} onClick={hook.toggleExpand}>
                                {hook.expand ? '收起 ' : '查看详细分析 '}
                                {hook.expand ? <UpOutline /> : <DownOutline />}
                            </div>
                        </>
                    ) : (
                        <Loading />
                    )}
                </div>
            </div>
        </React.Fragment>
    )
}
